<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>部署 | 赵小云学习笔记</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/logo.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <script data-ad-client="ca-pub-2245427233262012" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <meta name="description" content="愿半生编码，如一生好友。">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/assets/css/0.styles.fca152ce.css" as="style"><link rel="preload" href="/assets/js/app.28715422.js" as="script"><link rel="preload" href="/assets/js/5.cdfc0b9f.js" as="script"><link rel="preload" href="/assets/js/27.56ca4ce1.js" as="script"><link rel="preload" href="/assets/js/9.4c44b987.js" as="script"><link rel="prefetch" href="/assets/js/10.84acbb53.js"><link rel="prefetch" href="/assets/js/11.702efeb3.js"><link rel="prefetch" href="/assets/js/12.589fb250.js"><link rel="prefetch" href="/assets/js/13.5b7e8614.js"><link rel="prefetch" href="/assets/js/14.a954bfd1.js"><link rel="prefetch" href="/assets/js/15.bd11c63a.js"><link rel="prefetch" href="/assets/js/16.b4fb7988.js"><link rel="prefetch" href="/assets/js/17.61d84266.js"><link rel="prefetch" href="/assets/js/18.24a2bff9.js"><link rel="prefetch" href="/assets/js/19.43d31d8f.js"><link rel="prefetch" href="/assets/js/20.b22f54d0.js"><link rel="prefetch" href="/assets/js/21.9c07bc91.js"><link rel="prefetch" href="/assets/js/22.32e1eb60.js"><link rel="prefetch" href="/assets/js/23.093427d3.js"><link rel="prefetch" href="/assets/js/24.e648d309.js"><link rel="prefetch" href="/assets/js/25.d7282ca4.js"><link rel="prefetch" href="/assets/js/26.35acf93d.js"><link rel="prefetch" href="/assets/js/28.93379c82.js"><link rel="prefetch" href="/assets/js/29.51d63262.js"><link rel="prefetch" href="/assets/js/30.1b336946.js"><link rel="prefetch" href="/assets/js/31.e297de45.js"><link rel="prefetch" href="/assets/js/32.4bae9555.js"><link rel="prefetch" href="/assets/js/33.4239fd2e.js"><link rel="prefetch" href="/assets/js/34.bbc16b3c.js"><link rel="prefetch" href="/assets/js/35.f16977ac.js"><link rel="prefetch" href="/assets/js/36.6141cdc8.js"><link rel="prefetch" href="/assets/js/37.43f5a7f6.js"><link rel="prefetch" href="/assets/js/38.01c53507.js"><link rel="prefetch" href="/assets/js/39.21f63708.js"><link rel="prefetch" href="/assets/js/40.f9f38954.js"><link rel="prefetch" href="/assets/js/41.0175e1f4.js"><link rel="prefetch" href="/assets/js/42.422cba18.js"><link rel="prefetch" href="/assets/js/43.3d77a131.js"><link rel="prefetch" href="/assets/js/44.aab84de2.js"><link rel="prefetch" href="/assets/js/45.ac7ca1c5.js"><link rel="prefetch" href="/assets/js/46.9982952d.js"><link rel="prefetch" href="/assets/js/47.d4c85adf.js"><link rel="prefetch" href="/assets/js/48.d00a7fe9.js"><link rel="prefetch" href="/assets/js/49.03487062.js"><link rel="prefetch" href="/assets/js/50.bbfd00cd.js"><link rel="prefetch" href="/assets/js/51.1ef38ba0.js"><link rel="prefetch" href="/assets/js/52.f352c22a.js"><link rel="prefetch" href="/assets/js/53.fa377a7b.js"><link rel="prefetch" href="/assets/js/54.16d81c63.js"><link rel="prefetch" href="/assets/js/55.b2e1b9f2.js"><link rel="prefetch" href="/assets/js/56.99f69695.js"><link rel="prefetch" href="/assets/js/57.54be906e.js"><link rel="prefetch" href="/assets/js/58.e28944e4.js"><link rel="prefetch" href="/assets/js/59.647fcd7b.js"><link rel="prefetch" href="/assets/js/6.8f67e34e.js"><link rel="prefetch" href="/assets/js/60.ed875cf2.js"><link rel="prefetch" href="/assets/js/61.d244e754.js"><link rel="prefetch" href="/assets/js/62.82572383.js"><link rel="prefetch" href="/assets/js/63.afac6e14.js"><link rel="prefetch" href="/assets/js/64.1793ed0c.js"><link rel="prefetch" href="/assets/js/65.75847d31.js"><link rel="prefetch" href="/assets/js/66.a613f673.js"><link rel="prefetch" href="/assets/js/67.374e7e54.js"><link rel="prefetch" href="/assets/js/7.2df5fd3a.js"><link rel="prefetch" href="/assets/js/8.79c44677.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.b3708bf9.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.3b4fa92d.js"><link rel="prefetch" href="/assets/js/vendors~notification.11c6c6d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.fca152ce.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">赵小云学习笔记</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/notes/" class="nav-link">
  notes
</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/config/" class="nav-link">
  配置
</a></div><div class="nav-item"><a href="/plugin/" class="nav-link">
  插件
</a></div><div class="nav-item"><a href="/theme/" class="nav-link">
  主题
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="了解更多" class="dropdown-title"><span class="title">了解更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span class="title">了解更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          API
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
  CLI
</a></li><li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
  Node
</a></li></ul></li><li class="dropdown-item"><h4>
          开发指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html" class="nav-link">
  本地开发
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html" class="nav-link">
  设计理念
</a></li><li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
  FAQ
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html" class="nav-link">
  术语
</a></li></ul></li><li class="dropdown-item"><h4>
          其他
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html" class="nav-link">
  从 0.x 迁移
</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/notes/" class="nav-link">
  notes
</a></div><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/config/" class="nav-link">
  配置
</a></div><div class="nav-item"><a href="/plugin/" class="nav-link">
  插件
</a></div><div class="nav-item"><a href="/theme/" class="nav-link">
  主题
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="了解更多" class="dropdown-title"><span class="title">了解更多</span> <span class="arrow down"></span></button> <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span class="title">了解更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          API
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
  CLI
</a></li><li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
  Node
</a></li></ul></li><li class="dropdown-item"><h4>
          开发指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html" class="nav-link">
  本地开发
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html" class="nav-link">
  设计理念
</a></li><li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
  FAQ
</a></li><li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html" class="nav-link">
  术语
</a></li></ul></li><li class="dropdown-item"><h4>
          其他
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html" class="nav-link">
  从 0.x 迁移
</a></li><li class="dropdown-subitem"><a href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Changelog
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  0.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/guide/getting-started.html" class="sidebar-link">快速上手</a></li><li><a href="/guide/directory-structure.html" class="sidebar-link">目录结构</a></li><li><a href="/guide/basic-config.html" class="sidebar-link">基本配置</a></li><li><a href="/guide/assets.html" class="sidebar-link">静态资源的的的的的</a></li><li><a href="/guide/markdown.html" class="sidebar-link">Markdown 拓展</a></li><li><a href="/guide/using-vue.html" class="sidebar-link">在 Markdown 中 使用 Vue</a></li><li><a href="/guide/i18n.html" class="sidebar-link">多语言支持</a></li><li><a href="/guide/deploy.html" aria-current="page" class="active sidebar-link">部署</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/deploy.html#云开发-cloudbase" class="sidebar-link">云开发 CloudBase</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#github-pages" class="sidebar-link">GitHub Pages</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#netlify" class="sidebar-link">Netlify</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#google-firebase" class="sidebar-link">Google Firebase</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#surge" class="sidebar-link">Surge</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#heroku" class="sidebar-link">Heroku</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#vercel" class="sidebar-link">Vercel</a></li><li class="sidebar-sub-header"><a href="/guide/deploy.html#_21-云盒子" class="sidebar-link">21 云盒子</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>深入</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/frontmatter.html" class="sidebar-link">Front Matter</a></li><li><a href="/guide/permalinks.html" class="sidebar-link">永久链接</a></li><li><a href="/guide/markdown-slot.html" class="sidebar-link">Markdown 插槽</a></li><li><a href="/guide/global-computed.html" class="sidebar-link">全局计算属性</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="部署"><a href="#部署" class="header-anchor">#</a> 部署</h1> <p>下述的指南基于以下条件：</p> <ul><li>文档放置在项目的 <code>docs</code> 目录中；</li> <li>使用的是默认的构建输出位置；</li> <li>VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts:</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="云开发-cloudbase"><a href="#云开发-cloudbase" class="header-anchor">#</a> 云开发 CloudBase</h2> <p><a href="https://cloudbase.net/?site=vuepress" target="_blank" rel="noopener noreferrer">云开发 CloudBase<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是一个云原生一体化的 Serverless 云平台，支持静态网站、容器等多种托管能力，并提供简便的部署工具 <a href="https://cloudbase.net/framework.html?site=vuepress" target="_blank" rel="noopener noreferrer">CloudBase Framework<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来一键部署应用。</p> <ol><li>全局安装 CloudBase  CLI</li></ol> <div class="language- extra-class"><pre class="language-text"><code>npm install -g @cloudbase/cli
</code></pre></div><ol start="2"><li>在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 <a href="https://console.cloud.tencent.com/tcb/env/index?tdl_anchor=ad&amp;tdl_site=vuejs" target="_blank" rel="noopener noreferrer">开通环境<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：</li></ol> <div class="language- extra-class"><pre class="language-text"><code>cloudbase init --without-template
cloudbase framework:deploy
</code></pre></div><p>CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认</p> <p>确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 Github Action 来持续部署 Github 上的 VuePress 应用。</p> <p>也可以使用 <code>cloudbase init --template vuepress</code> 快速创建和部署一个新的 VuePress 应用</p> <p>更多详细信息请查看 CloudBase Framework 的<a href="https://github.com/TencentCloudBase/cloudbase-framework?site=vuepress#%E9%A1%B9%E7%9B%AE%E7%A4%BA%E4%BE%8B" target="_blank" rel="noopener noreferrer">部署项目示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="github-pages"><a href="#github-pages" class="header-anchor">#</a> GitHub Pages</h2> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在你的项目中，创建一个如下的 <code>deploy.sh</code> 文件（请自行判断去掉高亮行的注释）:</p></li></ol> <div class="language-bash extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-bash"><code><span class="token shebang important">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> -e

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run docs:build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.example.com' &gt; CNAME</span>

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> -A
<span class="token function">git</span> commit -m <span class="token string">'deploy'</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git master</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;REPO&gt;.git master:gh-pages</span>

<span class="token builtin class-name">cd</span> -
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>你可以在你的持续集成的设置中，设置在每次 push 代码时自动运行上述脚本。</p></div> <h3 id="github-pages-and-travis-ci"><a href="#github-pages-and-travis-ci" class="header-anchor">#</a> GitHub Pages and Travis CI</h3> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.github.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在项目的根目录创建一个名为 <code>.travis.yml</code> 的文件；</p></li> <li><p>在本地执行 <code>yarn</code> 或 <code>npm install</code> 并且提交生成的 lock 文件（即 <code>yarn.lock</code> 或 <code>package-lock.json</code>）；</p></li> <li><p>使用 GitHub Pages 部署提供程序模板并遵循 <a href="https://docs.travis-ci.com/user/deployment/pages/" target="_blank" rel="noopener noreferrer">Travis 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></li></ol> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">language</span><span class="token punctuation">:</span> node_js
<span class="token key atrule">node_js</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> lts/*
<span class="token key atrule">install</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> yarn install <span class="token comment"># npm ci</span>
<span class="token key atrule">script</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
<span class="token key atrule">deploy</span><span class="token punctuation">:</span>
  <span class="token key atrule">provider</span><span class="token punctuation">:</span> pages
  <span class="token key atrule">skip_cleanup</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">local_dir</span><span class="token punctuation">:</span> docs/.vuepress/dist
  <span class="token key atrule">github_token</span><span class="token punctuation">:</span> $GITHUB_TOKEN <span class="token comment"># 在 GitHub 中生成，用于允许 Travis 向你的仓库推送代码。在 Travis 的项目设置页面进行配置，设置为 secure variable</span>
  <span class="token key atrule">keep_history</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">on</span><span class="token punctuation">:</span>
    <span class="token key atrule">branch</span><span class="token punctuation">:</span> master
</code></pre></div><h3 id="gitlab-pages-and-gitlab-ci"><a href="#gitlab-pages-and-gitlab-ci" class="header-anchor">#</a> GitLab Pages and GitLab CI</h3> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.gitlab.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.gitlab.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://gitlab.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在 <code>.vuepress/config.js</code> 中将 <code>dest</code> 设置为 <code>public</code>。</p></li> <li><p>在你项目的根目录下创建一个名为 <code>.gitlab-ci.yml</code> 的文件，无论何时你提交了更改，它都会帮助你自动构建和部署：</p></li></ol> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">image</span><span class="token punctuation">:</span> node<span class="token punctuation">:</span>9.11.1

<span class="token key atrule">pages</span><span class="token punctuation">:</span>
 <span class="token key atrule">cache</span><span class="token punctuation">:</span>
   <span class="token key atrule">paths</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> node_modules/

 <span class="token key atrule">script</span><span class="token punctuation">:</span>
 <span class="token punctuation">-</span> yarn install <span class="token comment"># npm install</span>
 <span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
 <span class="token key atrule">artifacts</span><span class="token punctuation">:</span>
   <span class="token key atrule">paths</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> public
 <span class="token key atrule">only</span><span class="token punctuation">:</span>
 <span class="token punctuation">-</span> master
</code></pre></div><h2 id="netlify"><a href="#netlify" class="header-anchor">#</a> Netlify</h2> <ol><li>在 Netlify 中, 创建一个新的 GitHub 项目，使用以下设置：</li></ol> <ul><li><strong>Build Command:</strong> <code>yarn docs:build</code> 或者 <code>npm run docs:build</code></li> <li><strong>Publish directory:</strong> <code>docs/.vuepress/dist</code></li></ul> <ol start="2"><li>点击 deploy 按钮！</li></ol> <h2 id="google-firebase"><a href="#google-firebase" class="header-anchor">#</a> Google Firebase</h2> <ol><li><p>请确保你已经安装了 <a href="https://www.npmjs.com/package/firebase-tools" target="_blank" rel="noopener noreferrer">firebase-tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></li> <li><p>在你项目的根目录下创建 <code>firebase.json</code> 和 <code>.firebaserc</code>，并包含以下内容：</p></li></ol> <p><code>firebase.json</code>:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
 <span class="token property">&quot;hosting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token property">&quot;public&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./docs/.vuepress/dist&quot;</span><span class="token punctuation">,</span>
   <span class="token property">&quot;ignore&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>.firebaserc</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
 <span class="token string">&quot;projects&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token string">&quot;default&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;YOUR_FIREBASE_ID&gt;&quot;</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>在执行了 <code>yarn docs:build</code> 或 <code>npm run docs:build</code> 后, 使用 <code>firebase deploy</code> 指令来部署。</li></ol> <h2 id="surge"><a href="#surge" class="header-anchor">#</a> Surge</h2> <ol><li><p>首先，假设你已经安装了 <a href="https://www.npmjs.com/package/surge" target="_blank" rel="noopener noreferrer">surge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</p></li> <li><p>运行 <code>yarn docs:build</code> 或者 <code>npm run docs:build</code>；</p></li> <li><p>想要使用 surge 来部署，你可以运行： <code>surge docs/.vuepress/dist</code>；</p></li></ol> <p>你也可以通过 <code>surge docs/.vuepress/dist yourdomain.com</code> 来部署到 <a href="http://surge.sh/help/adding-a-custom-domain" target="_blank" rel="noopener noreferrer">自定义域名<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="heroku"><a href="#heroku" class="header-anchor">#</a> Heroku</h2> <ol><li><p>首先安装 <a href="https://devcenter.heroku.com/articles/heroku-cli" target="_blank" rel="noopener noreferrer">Heroku CLI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</p></li> <li><p><a href="https://signup.heroku.com" target="_blank" rel="noopener noreferrer">在这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 注册一个 Heroku 账号；</p></li> <li><p>运行 <code>heroku login</code> 并填写你的 Heroku 证书：</p> <div class="language-bash extra-class"><pre class="language-bash"><code>heroku login
</code></pre></div></li> <li><p>在你的项目根目录中，创建一个名为 <code>static.json</code> 的文件，并包含下述内容：</p></li></ol> <p><code>static.json</code>:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./docs/.vuepress/dist&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这里是你项目的配置，请参考 <a href="https://github.com/heroku/heroku-buildpack-static" target="_blank" rel="noopener noreferrer">heroku-buildpack-static<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 了解更多。</p> <ol start="5"><li>配置 Heroku 的 git 远程仓库：</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 版本变化</span>
<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
<span class="token function">git</span> commit -m <span class="token string">&quot;My site ready for deployment.&quot;</span>

<span class="token comment"># 以指定的名称创建一个新的 heroku 应用</span>
heroku apps:create example

<span class="token comment"># 为静态网站设置构建包</span>
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
</code></pre></div><ol start="6"><li>部署你的网站：</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 发布网站</span>
<span class="token function">git</span> push heroku master

<span class="token comment"># 打开浏览器查看 Helku CI 的 dashboard</span>
heroku <span class="token function">open</span>
</code></pre></div><h2 id="vercel"><a href="#vercel" class="header-anchor">#</a> Vercel</h2> <p>请查看 <a href="https://vercel.com/guides/deploying-vuepress-to-vercel" target="_blank" rel="noopener noreferrer">用 Vercel 创建和部署一个 VuePress 应用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="_21-云盒子"><a href="#_21-云盒子" class="header-anchor">#</a> 21 云盒子</h2> <p>请查看 <a href="https://www.21yunbox.com/docs/#/deploy-vuepress" target="_blank" rel="noopener noreferrer">21 云盒子 - 部署一个 VuePress 静态网页<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/vuejs/vuepress/edit/master/packages/docs/docs/guide/deploy.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/1/23 下午1:08:04</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/i18n.html" class="prev">
        多语言支持
      </a></span> <span class="next"><a href="/guide/frontmatter.html">
        Front Matter
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.28715422.js" defer></script><script src="/assets/js/5.cdfc0b9f.js" defer></script><script src="/assets/js/27.56ca4ce1.js" defer></script><script src="/assets/js/9.4c44b987.js" defer></script>
  </body>
</html>
